<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="./js/extend.js"></script>
	<script type="text/javascript" src="./js/demo.js"></script>
	<link rel="stylesheet" href="./css/inc.css" />
	<link rel="stylesheet" href="./demo/demo.css" />
	<!-- 高亮代码 -->
	<script type="text/javascript" src="./high/rainbow-custom.min.js"></script>
	<link rel="stylesheet" href="./high/github.css" />
	<title>bootstrp 结合</title>
</head>
<body class="bgwhite-1">
<div class="w800 auto" id="d">
	<div class="Menu">
		<a href="index.html"><i class="icon-home gray mr5"></i>首页</a>
		<a href="layer.html"><i class="icon-th gray mr5"></i>布局</a>
		<a href="table.html"><i class="icon-table gray mr5"></i>表格</a>
		<a href="form.html"><i class="icon-building gray mr5"></i>表单</a>
		<a href="button.html"><i class="icon-coffee gray mr5"></i>色彩</a>
		<a href="ico.html"><i class="icon-leaf gray mr5"></i>图标</a>
		<a href="js.html"><i class="icon-legal gray mr5"></i>js插件</a>
	</div>
</div>

<!-- 导航菜单 -->
<div class="scrollMenu">
	<a href="#d"><i class="icon-arrow-up icon-large mr20 ml5 yellow"></i>顶部</a>
	<a href="#d1"><i class="icon-pushpin icon-large mr20 ml5 "></i>弹窗</a>
	<a href="#d2"><i class="icon-pushpin icon-large mr20 ml5 "></i>模态框</a>
	<a href="#d3"><i class="icon-pushpin icon-large mr20 ml5 "></i>尾随</a>
	<a href="#d4"><i class="icon-pushpin icon-large mr20 ml5 "></i>滚动图片</a>
	<a href="#d5"><i class="icon-pushpin icon-large mr20 ml5 "></i>轮播图</a>
	<a href="#d6"><i class="icon-pushpin icon-large mr20 ml5 "></i>飞翔数字</a>
	<a href="#d7"><i class="icon-pushpin icon-large mr20 ml5 "></i>选项卡</a>
	<a href="#d8"><i class="icon-pushpin icon-large mr20 ml5 "></i>拖拽</a>
	<a href="#d9"><i class="icon-pushpin icon-large mr20 ml5 "></i>自动显示大图</a>
	<a href="#d10"><i class="icon-pushpin icon-large mr20 ml5 "></i>ajax</a>
	<a href="#d11"><i class="icon-pushpin icon-large mr20 ml5 "></i>向上滚动</a>
</div>
<script type="text/javascript">
	$('.scrollMenu').scrollMenu();
</script>
<!-- 导航菜单结束 -->

<!-- ================================================== -->
<!-- 弹窗区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d1">简单弹窗</h5>
	<div class="bdd p10">
		<button onclick="msg();" class="mt5 w50 btn bgblue2">默认弹窗</button>
		<button onclick="msg(1);" class="mt5 w50 btn bgteal">弹出5秒</button>
		<button onclick="msg(2);" class="mt5 w50 btn bgolive">显示遮罩</button>
		<button onclick="msg(3);" class="mt5 w50 btn bgfuchsia">关闭按钮</button>
		<button onclick="msg(4);" class="mt5 w50 btn bgblack">回调函数</button>
		<button onclick="msg(5);" class="mt5 w100 btn bgnavy">支持自定义大小</button>
		<button class="mt5 w50 btn bgred closeAllMsg" type="button" value="关闭所有弹窗"/>关闭所有</button>
	</div>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">调用方式：$.msg(); [支持遮罩、esc关闭、回调函数等常用功能]</p>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">参数说明</h6>
	<pre data-language="javascript" class="github fv">
	str:'内容'	//显示内容
 	timeout:2, 	//关闭时间
 	shade:0, 	//是否有遮罩
 	closebtn:0, 	//是否显示关闭按钮
 	css:{width:0,height:0}, //自定义大小
 	close:function(){} //回调函数
	</pre>
	<!-- 说明结束 -->
</div>
<!-- 弹窗区域结束 -->

<!-- 模态框区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d2">模态框</h5>
	<div class="bdd p10">
		<button href="index.html" class="dels btn bgmaroon f14">删除并跳转到首页</button>
		<button href="index.html" class="model1 btn bggreen f14">普通调用</button>
	</div>
	<script type="text/javascript">
		// 删除弹出确认框
		$('.dels').click(function(){
			var h = $(this).attr('href');
			$.confirmd({
				yes:function(){
					location.href = h;
				},
				msg:'您确定要删除吗？？？？'
			});
			return false;
		})
		$('.model1').click(function(){
			$.confirmd({
				yes:function(){$.msg({str:'确定了'})}, 
				no:function(){$.msg({str:'除了回车都是取消'})},
				msg:'键盘操作除了回车都是取消操作'
			})
			return false;
		})
	</script>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">
		调用方式：$.confirmd();  响应回车键确定，其他键取消 <br />
		关闭：$.delConfirmd();
	</p>
	<h6 class="mb10 mt10 dib bgblue-1 white p10">参数说明</h6>
	<pre data-language="javascript" class="github fv">
	yes:	//点击确定回调
	no:	//点击关闭回调
	msg:	//显示内容
	</pre>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">本例js代码</h6>
	<pre data-language="javascript" class="github fv">
	// 删除弹出确认框
	$('.dels').click(function(){
		var h = $(this).attr('href');
		$.confirmd({
			yes:function(){
				location.href = h;
			},
			msg:'您确定要删除吗？？？？'
		});
		return false;
	})
	$('.model1').click(function(){
		$.confirmd({
			yes:function(){$.msg({str:'确定了'})}, 
			no:function(){$.msg({str:'除了回车都是取消'})},
			msg:'键盘操作除了回车都是取消操作'
		})
		return false;
	})
	</pre>
	<!-- 说明结束 -->
</div>
<!-- 模态框区域结束 -->

<!-- 尾随区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d3">尾随鼠标进入进出效果</h5>
	<div class="bdd p10">
		<div class="row6 bgwhite">
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgred" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgred1" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgred2" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgred3" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgred4" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgred5" style="position:absolute;width:100%;height:100%;display:none;"></div></div>

			<div class="bgwhite-2 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgmaroon" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-2 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgmaroon1" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-2 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgmaroon2" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-2 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgmaroon3" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-2 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgmaroon4" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-2 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgmaroon5" style="position:absolute;width:100%;height:100%;display:none;"></div></div>

			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgteal" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgteal-1" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgteal-2" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgteal-3" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgteal-4" style="position:absolute;width:100%;height:100%;display:none;"></div></div>
			<div class="bgwhite-4 span1 rel of h100 lh100 tc">span1<div class="bg opa30 tc bgteal-5" style="position:absolute;width:100%;height:100%;display:none;"></div></div>

		</div>
	</div>
	<script type="text/javascript">
		$('.span1').trailing({rand:0,moveTime:300});
	</script>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">尾随鼠标进出某区域，可以定制动画效果和动画时间。</p>
	<h6 class="mb10 mt10 dib bgblue-1 white p10">参数说明</h6>
	<pre data-language="javascript" class="github">
	moveTime:1000, 	//动画时间间隔 毫秒
	rand:1 		//是否开始随机动画 也可指定动画名称 如：easeOutElastic</pre>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">本例代码</h6>
	<pre data-language="javascript" class="github">
	$('.span1').trailing({rand:0,moveTime:200});</pre>
	<!-- 说明结束 -->
</div>
<!-- 尾随区域结束 -->

<!-- 滚动图片区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d4">滚动图片</h5>
	<div class="bdd">
		<div class="defineScroll">
			<div class="pic">
				<a href="" title="布局" style="display:block;" ><img src="./img/s1.jpg" /></a>
				<a href="" title="表格"><img src="./img/s2.jpg" /></a>
				<a href="" title="表单系统"><img src="./img/s3.jpg" /></a>
				<a href="" title="混搭颜色"><img src="./img/s4.jpg" /></a>
				<a href="" title="基与JQuyer插件"><img src="./img/s5.jpg" /></a>
				<a href="" title="基与JQuyer插件"><img src="./img/s6.jpg" /></a>
				<a href="" title="基与JQuyer插件"><img src="./img/s7.jpg" /></a>
				<a href="" title="基与JQuyer插件"><img src="./img/s8.jpg" /></a>
				<a href="" title="基与JQuyer插件"><img src="./img/s9.jpg" /></a>
				<a href="" title="基与JQuyer插件"><img src="./img/s10.jpg" /></a>
				<a href="" title="基与JQuyer插件"><img src="./img/s11.jpg" /></a>
				<a href="" title="基与JQuyer插件"><img src="./img/s12.jpg" /></a>

			</div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</div>
	<script type="text/javascript">
		$('.defineScroll').imgScroll({moveStyle:'x',one:1,rand:0});
	</script>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">图片滚动</p>
	<h6 class="mb10 mt10 dib bgblue-1 white p10">参数说明</h6>
	<pre data-language="javascript" class="github fv">
	moveStyle:'x', 		//运动方向 x水平 y垂直
	one: 1 ,			//每次滚动1个图片还是整个可视区域
	time:3000, 		//时间间隔 毫秒
	moveTime:1000, 	//动画时间间隔 毫秒
	rand:true, 			//是否开始随机动画
	</pre>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">本例js代码</h6>
	<pre data-language="javascript" class="github fv">$('.defineScroll').imgScroll();	</pre>
	<!-- 说明结束 -->
</div>
<!-- 滚动图片区域结束 -->

<!-- 轮播图区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d5">轮播图 | 幻灯片</h5>
	<div class="defineSlide">
		<div class="pic">
			<a href="" title="布局" style="display:block;" ><img src="./img/s1.jpg" /></a>
			<a href="" title="表格"><img src="./img/s2.jpg" /></a>
			<a href="" title="表单系统"><img src="./img/s3.jpg" /></a>
			<a href="" title="混搭颜色"><img src="./img/s4.jpg" /></a>
			<a href="" title="基与JQuyer插件"><img src="./img/s5.jpg" /></a>
		</div>
	</div>
	<script type="text/javascript">
		$('.defineSlide').slide({moveStyle:'y'});
	</script>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">
		调用方式：$('.defineSlide').slide(); <br />
		轮播最外层的样式名称可以随意取如defineSlide，里面的样式都是固定的，参考上面的样式名	; 
		插件会自动抓取a标签title内容作为显示背景内容
	</p>
	<h6 class="mb10 mt10 dib bgblue-1 white p10">参数说明</h6>
	<pre data-language="javascript" class="github fv">
	moveStyle:'x', 			// 运动方向 x水平 y垂直
	time:5000,			// 时间间隔 毫秒
	moveTime:1000,		// 动画时间间隔 毫秒
	rand:true, 			// 是否开始随机动画
	bgPos:'bottom',		// 内容显示位置 'up' , 'down'
	numPos:'bottom',		// 数字显示位置 'up' , 'down'
	isBg:true				// 内容背景是否显示
	</pre>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">本例 css 样式</h6>
	<pre data-language="css" class="github fv">
	.defineSlide{height:300px;overflow:hidden;position:relative;}
	.defineSlide .pic{width:20000px;}
	.defineSlide .pic a{display:block;width:800px;height:300px;}
	.defineSlide .pic a img{width:100%;height:100%;}
	.defineSlide .nums{position:absolute;width:100%;text-align:right;}
	.defineSlide .nums b{display:inline-block;font-size:14px;font-weight:400;background:#fff;padding:2px 8px;opacity:.5;margin:2px;}
	.defineSlide .nums b.act{background:#C0392B;color:#fff;font-weight:700;opacity:1;}
	.defineSlide .bg{height:30px;width:100%;background:#fff;opacity:.5;}
	.defineSlide .bgCont{line-height:30px;text-indent:1em;width:100%;}
	</pre>
	<h6 class="mb10 mt10 dib bgteal-1 white p10">自定义示例</h6>
	<div class="row">
		<!-- 1 -->
		<div class="span6">
			<!-- 幻灯片 -->
			<div class="defineSlide1">
				<div class="pic">
					<a href="" title="布局" style="display:block;" ><img src="./img/s1.jpg" /></a>
					<a href="" title="表格"><img src="./img/s2.jpg" /></a>
					<a href="" title="表单系统"><img src="./img/s3.jpg" /></a>
					<a href="" title="混搭颜色"><img src="./img/s4.jpg" /></a>
					<a href="" title="基与JQuyer插件"><img src="./img/s5.jpg" /></a>
				</div>
			</div>
			<script type="text/javascript">
				$('.defineSlide1').slide({
					moveStyle:'y',
					time:3000,
					moveTime:500,
					bgPos:'up',
					rand:false,
					isBg:false
				});
			</script>
			<!-- 幻灯片结束 -->
		</div>
		<!-- 1 end -->
		<!-- 2 -->
		<div class="span6">
			<!-- 幻灯片 -->
			<div class="defineSlide2">
				<div class="pic">
					<a href="" title="布局" style="display:block;" ><img src="./img/s1.jpg" /></a>
					<a href="" title="表格"><img src="./img/s2.jpg" /></a>
					<a href="" title="表单系统"><img src="./img/s3.jpg" /></a>
					<a href="" title="混搭颜色"><img src="./img/s4.jpg" /></a>
					<a href="" title="基与JQuyer插件"><img src="./img/s5.jpg" /></a>
				</div>
			</div>
			<script type="text/javascript">
				$('.defineSlide2').slide({
					time:4000,
					moveTime:600,
					numPos:'up'
				});
			</script>
			<!-- 幻灯片结束 -->
		</div>
		<!-- 2 end -->
	</div>
	<!-- 说明结束 -->
</div>
<!-- 轮播图区域结束 -->

<!-- 飞翔的数字区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d6">飞翔的数字</h5>
	<div class="bdd p10 bgwhite">
		<span class="Fly bdd p10 cp a">支持 <b class="Num">1</b></span>
		<span class="Fly btn bggreen"><i class="icon-thumbs-up"></i> 赞 <b class="Num">1</b></span>
		<span class="bde cp Fly p10 bgwhite m5 blue a">
			<i class="icon-comment"></i> <span class="">评论 <b class="Num">35</b></span>
		</span>
		<span class="Fly btn bgteal2"><i class="icon-heart red mr5"></i> 喜欢 <b class="Num">84</b></span>
		<span class="dFly btn bgblue rel"><i class="icon-star-empty blue1 icon-large mr5 vmd f30"></i> <i class="abs r40 t10 icon-star-empty blue1 icon-large mr5 vmd f16"></i><span class="f16">收藏[有回调] </span><b class="Num fv f30 vn">2</b></span>
	</div>
	<script type="text/javascript">
		//点击赞之后动画
		$('.Fly').click(function(){
			$(this).FlyNums()
			return false;
		})
		$('.dFly').click(function(){
				$(this).FlyNums(function(){
					$.msg({str:getMsgTips('恭喜！收藏成功！',1),shade:1,timeout:5});
				})
				return false;
			})
	</script>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">给标签加上样式名：Fly 需要增加数字的标签加上样式名 Num ，里面放入初始数字</p>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">本例js代码</h6>
	<pre data-language="javascript" class="github fv">
	$('.Fly').click(function(){
		$(this).FlyNums()
		return false;
	})
	$(this).FlyNums(function(){
		$.msg({str:'<i class="f22 icon-ok-circle icon-large green mr30 vmd"></i> <span class="fm">恭喜！收藏成功！</span>',shade:1,timeout:5});
	})
	return false;
	</pre>
	<!-- 说明结束 -->
</div>
<!-- 飞翔的数字区域结束 -->

<!-- 选项卡区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d7">tab切换</h5>
	<div class="bdd p10">
		<div class="tabMenu">
			<a href="" class="trans act">tab1</a>
			<a href="" class="trans">tab2</a>
		</div>
		<dl class="tabSub">
			<dd class="bgwhite p20 h50 bde act">
				<p class="green b">tab1</p>
				<p class="green b">tab1</p>
				<p class="green b">tab1</p>
			</dd>
			<dd class="bgwhite p20 h50 bde dn">
				<p class="purple b">tab2</p>
				<p class="purple b">tab2</p>
				<p class="purple b">tab2</p>
			</dd>
		</dl>
	</div>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">
	菜单样式class=tabMenu  选中样式为act<br />
	显示区域必须dl class=tabSub 和dd 防止标签冲突
	</p>
	<!-- 说明结束 -->
</div>
<!-- 选项卡区域结束 -->

<!-- 拖拽区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d8">拖拽效果</h5>
	<div class="bdd bgwhite rel h200">
		<div id="dragNoLimit" class="abs w100 h100 bgteal white f48"><h5 class="f14 bgblack title lh30 p5 fm">拖这里</h3>自由</div>
			<div id="dragLimit" class="abs w100 h100 bgnavy white f48" style="left:120px;">限制</div>
	</div>
	<script type="text/javascript">
		$('#dragNoLimit').drag({
			limit:0,
			title:'.title'
		});
		$('#dragLimit').drag({
			limit:1,
		});
	</script>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">对象可以方便的拖拽，有限制和不限制范围和有无标题之分</p>
	<h6 class="mb10 mt10 dib bgblue-1 white p10">参数说明</h6>
	<pre data-language="javascript" class="github">
	limit:1, 	//是否限制范围 0 不限制 1 限制
	title:0 	//是不是标题，1是标题就拖动上级 0拖动自己 填写可以取到标题的class或者id
	</pre>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">本例js代码</h6>
	<pre data-language="javascript" class="github">
	$('#dragNoLimit').drag({
		limit:0,
		title:'.title'
	});
	$('#dragLimit').drag({
		limit:1,
	});
	</pre>
	<!-- 说明结束 -->
</div>
<!-- 拖拽区域结束 -->

<!-- 自动显示大图区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d9">自动显示大图</h5>
	<div class="bdd p10">
		<p class="p10 showPic dib bde mt10 ml15">
			<img src="./img/1.jpg" width="80"  />
		</p>
		<p class="p10 showPic1 dib bde mt10 ml15">
			<img src="./img/1.jpg" width="80" />
		</p>
		<p class="p10 showPic2 dib bde mt10 ml15">
			<img src="./img/1.jpg" width="80" />
		</p>
	</div>
	<script type="text/javascript">
		$('.showPic').showPic();
		$('.showPic1').showPic({
			time:1000,
			e:{left:15,top:15}
		})
		$('.showPic2').showPic({
			fllow:1,
			e:{left:15,top:15}
		})
	</script>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<pre data-language="javascript" class="github fv">
	自动判断图片出现的位置，不会超出浏览器
	图片外层加上class="showPic"即可,支持跟随鼠标和固定显示
	调用1：$('.包裹名').showPic()
	调用2：$('.包裹名').showPic({fllow:1}) 鼠标跟随
	</pre>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">本例js代码</h6>
	<pre data-language="javascript" class="github fv">
	$('.showPic').showPic();
	$('.showPic1').showPic({
		time:1000, // x秒后出现图片
		e:{left:15,top:15}  //图片距离鼠标位置
	})
	$('.showPic2').showPic({
		fllow:1, //是否开启跟随，1是 0 否
		e:{left:15,top:15}
	})
	</pre>	
	<!-- 说明结束 -->
</div>
<!-- 自动显示大图区域结束 -->

<!-- ajax区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d10">ajax应用</h5>
	<div class="bdd p10 of bgwhite">
		<form action="" class="form l bdd m3 p5" onsubmit="return ajax(this);">
			<input class="w30" type="text" name="name" />
			<button type="submit" class="btn bggray" />无地址</button>
		</form>

		<form action="./php/ajax.php" class="form l bdd m3 p5" onsubmit="return ajax(this);">
			<input class="w30" type="text" name="name" />
			<button type="submit" class="btn bggray" />默认</button>
		</form>

		<form action="./php/ajax.php" class="form l bdd m3 p5" onsubmit="return ajax(this);">
			<input type="hidden" name="action" value="1" />
			<input class="w30" type="text" name="name" />
			<button type="submit" class="btn bggreen2" />成功</button>
		</form>

		<form action="./php/ajax.php" class="form l bdd m3 p5" onsubmit="return ajax(this,'index.html');">
			<input type="hidden" name="action" value="1" />
			<input class="w30" type="text" name="name" />
			<button type="submit" class="btn bggreen" />跳转</button>
		</form>

		<form action="./php/ajax.php" class="form l bdd m3 p5" onsubmit="return ajax(this,1);">
			<input type="hidden" name="action" value="1" />
			<input class="w30" type="text" name="name" />
			<button type="submit" class="btn bggreen-2" />刷新</button>
		</form>

		<form action="./php/ajax.php" class="form l bdd m3 p5" onsubmit="return ajax(this);">
			<input type="hidden" name="action" value="2" />
			<input class="w30" type="text" name="name" />
			<button type="submit" class="btn bgred" />失败</button>
		</form>
	</div>
	<div class="bdd p10 bgwhite mt5">
		<span class="gray mr10">链接ajax示例:</span>
		<a href="" class="ajax gray tdu f16 fm mr10">无提交地址</a>
		<a href="./php/ajax.php?action=1" class="ajax tdu mr10 f16 fm green">成功</a>
		<a href="./php/ajax.php?action=1" class="ajax tdu mr10 f16 fm green-2" data-url="1">刷新</a>
		<a href="./php/ajax.php?action=1" class="ajax tdu mr10 f16 fm teal-2" data-url="index.html">跳转</a>
		<a href="./php/ajax.php?action=2" class="ajax tdu mr10 f16 fm red">失败</a>
	</div>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">
	在需要ajax的form表单，或者a链接或者标签上的应用。<br />
	form: 标签内加入 onsubmit = return ajax(this); 即可； php 需要返回json数组 Array('title'=>'提示信息',err=0);<br />
	如：onsubmit = return ajax(this,'index.html') php返回Array('title'=>'有错误发生，将跳转到首页',err=1);<br />
	第二个参数解释：字符型代表跳转地址，没有第二个参数代表成功操作后无任何变化,数字1时代表成功后刷新当前页面 <br />
		<span class="blue">
			a链接 class样式加上ajax, href填上ajax地址即可，跳转或者刷新加上data-url="index.html"或者data-url="1"即可
		</span>
	</p>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">本例代码</h6>
	<pre data-language="html" class="github fv">
	<form action="./php/ajax.php" class="form l bdd m3 p5" onsubmit="return ajax(this,1);">
		<input type="hidden" name="action" value="1" />
		<input class="w30" type="text" name="name" />
		<button type="submit" class="btn bggreen-2" />刷新</button>
	</form>
	<a href="./php/ajax.php?action=1" class="ajax tdu f16 fm teal-2" data-url="index.html">跳转</a>
	</pre>
	<!-- 说明结束 -->
</div>
<!-- ajax区域结束 -->

<!-- 向上滚动区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="d11">滚动文字</h5>
	<div class="bdd p10 scrollText">
		<ul class="s1">
			<li class="bggreen1"><a href="">八月中秋白露</a></li>
			<li class="bggreen"><a href="">路上行人凄凉</a></li>
			<li class="bggreen-1"><a href="">小桥流水稻花香</a></li>
			<li class="bggreen-2"><a href="">日夜千思万想</a></li>
		</ul>
		<div class="s2">
			<ul>
				<li class="li bgblue2"><a href="">马瘦毛长蹄子肥</a></li>
				<li class="li bgblue1"><a href="">儿子偷爹不算贼</a></li>
				<li class="li bgblue"><a href="">瞎大爷娶了瞎大奶奶</a></li>
				<li class="li bgblue-1"><a href="">老两口过了多半辈儿</a></li>
				<li class="li bgblue-2"><a href="">谁也没看见谁</a></li>
			</ul>
		</div>
		<ul class="s3">
			<li class="bgteal1"><a href="">难难难</a></li>
			<li class="bgteal"><a href="">道德玄</a></li>
			<li class="bgteal-1"><a href="">不对知音不可弹</a></li>
			<li class="bgteal-2"><a href="">对了知音弹几句</a></li>
			<li class="bgteal-3"><a href="">不对知音那是--</a></li>
			<li class="bgteal-4"><a href="">枉费舌尖。</a></li>
		</ul>

	</div>
	<script type="text/javascript">
		$.fn.scrollText = function(option){
			var _t = $(this);
			var opt = {
				time : 3000, //滚动时间
				name : null, //滚动区域内部元素
				num : 1 //每次滚动的数量
			}
			opt = $.extend(opt, option);
			_t.timer = null;
			_t.auto = function(){
				_t.timer = setInterval(function(){
					var li = (opt.name) ? _t.find(opt.name) : _t.children(); 
					var liH = li.eq(0).outerHeight()*opt.num ;
					li.slice(0,opt.num).clone().appendTo(_t);
					li.first().animate({
						'margin-top': -liH
					},function(){
							li.slice(0,opt.num).remove();
					});
				},opt.time);
			};
			_t.addEv = function(){
				_t.hover(function(){
					clearInterval(_t.timer);
				},function(){
					_t.auto();
				});
			}
			_t.auto();
			_t.addEv();
		};

		$('.s1').scrollText();
		$('.s2').scrollText({
			name : '.li',
			num : 2,
			time : 2000
		});
		$('.s3').scrollText({time:1000,num:3});
	</script>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">调用方式</h6>
	<p class="gray-1 bde p10 bgwhite">$('.s1').scrollText()</p>
	<h6 class="mb10 mt10 dib bgblue-1 white p10">参数说明</h6>
	<pre data-language="javascript" class="github fv">
	{
		time : 3000, //滚动时间
		name : '.li', //滚动区域内部元素
		num : 1 //每次滚动的数量
	}
	</pre>
	<h6 class="mb10 mt10 dib bgpurple-1 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">。。。</p>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">pre</h6>
	<pre data-language="javascript" class="github fv">
	。。。
	</pre>
	<h6 class="mb10 mt10 dib bgteal-1 white p10">pre</h6>
	<p class="gray-1 pre bde p10 bgwhite">
		。。。
	</p>
	<!-- 说明结束 -->
</div>
<!-- 向上滚动区域结束 -->

<!-- demo区域 -->
<div class="w800 auto mt20">
	<!-- 例子开始 -->
	<h5 class="f36 mb10 fm p10 white bgblack" id="">demo标题</h5>
	<div class="bdd p10">
		。。。
	</div>
	<!-- 例子结束 -->
	<!-- 说明 -->
	<h6 class="mb10 mt10 dib bggreen-2 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">。。。</p>
	<h6 class="mb10 mt10 dib bgblue-1 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">。。。</p>
	<h6 class="mb10 mt10 dib bgpurple-1 white p10">说明</h6>
	<p class="gray-1 bde p10 bgwhite">。。。</p>
	<h6 class="mb10 mt10 dib bgorange-1 white p10">pre</h6>
	<pre data-language="javascript" class="github fv">
	。。。
	</pre>
	<h6 class="mb10 mt10 dib bgteal-1 white p10">pre</h6>
	<p class="gray-1 pre bde p10 bgwhite">
		。。。
	</p>
	<!-- 说明结束 -->
</div>
<!-- demo区域结束 -->




<div class="w800 auto lh30 tc black4 fv f14 bgblack mt30">Powered by LDF QQ 47121862 © 2014-2015</div>

<div class="Fixed cp abs w30 bggray white p5 tc f12 fm fixed b10 r10 dn a"><i class="icon-arrow-up icon-large mr10 f22"></i> 顶部</div>
</body>
</html>